<template>
  <transition name="slide">
    <music-list :title="getSinger.name" :songs="songs" :bgImage="getSinger.avatar"></music-list>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import { createSong } from "@/common/js/song";

// import { getSingerDetailJSONP } from 'api/singer'
import { getSingerDetailProxy } from "api/singer";

import MusicList from "components/music-list/music-list";

export default {
  components: {
    MusicList
  },
  data() {
    return {
      songs: []
    };
  },
  computed: {
    ...mapGetters(["getSinger"])
  },
  created() {
    this.getSingerDetailData();
  },
  methods: {
    getSingerDetailData() {
      if (!this.getSinger) {
        this.$router.go(-1);
        return;
      }

      // getSingerDetailJSONP(this.getSinger.id).then(res => {
      //   console.log(res)
      // })
      getSingerDetailProxy(this.getSinger.id).then(res => {
        this.songs = this._normalizeSongs(res.data.data.list);
      });
    },
    // 序列化数据
    _normalizeSongs(list) {
      const ret = [];
      list.forEach(item => {
        const { musicData } = item;
        ret.push(createSong(musicData));
      });
      return ret;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable';

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>

